<template>
  <el-dialog title="上传" v-model="open" width="30%" @close="close" @open="initOpen">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false" scroll-to-error>
      <el-form-item>
        <el-radio-group v-model="form.type">
          <el-radio v-for="item in templateType" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片" prop="image">
        <ImageUpload v-model="form.image" @uploadFile="uploadImageSuccess" @delFile="deleteImage" />
      </el-form-item>
      <el-form-item label="省份" prop="provinceId">
        <el-select v-model="form.provinceId" @change="chooseProvince" clearable style="width: 100%;">
          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="cityId">
        <el-select v-model="form.cityId" @change="chooseCity" clearable style="width: 100%;">
          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区（县）" prop="countyId">
        <el-select v-model="form.countyId" @change="chooseCounty" clearable style="width: 100%;">
          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="震级" prop="mm">
        <el-input v-model="form.mm" v-inputNumber="1" clearable></el-input>
      </el-form-item>
      <el-form-item label="附件上传" prop="file">
        <file-upload v-model="form.file" @uploadFile="uploadSuccess" @delFile="deleteFile" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { templateType } from '@/views/quickMapping/common/const'
import { getProvince, getChildArea } from "@/api/system/division"

const { proxy } = getCurrentInstance()
const props = defineProps({
  open: Boolean
})
const emits = defineEmits(['update:open'])
const form = ref({ type: '1' })
const rules = {
  image: [{ required: true, message: '请上传图片！', trigger: 'change' }],
  provinceId: [{ required: true, message: '请选择省份！', trigger: 'change' }],
  cityId: [{ required: true, message: '请选择城市！', trigger: 'change' }],
  countyId: [{ required: true, message: '请选择区（县）！', trigger: 'change' }],
  mm: [{ required: true, message: '请填写震级！', trigger: 'blur' }]
}

// 省市县
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const getProvinceData = () => {
  getProvince().then(res => {
    if (res.code == 200) {
      provinceData.value = res.data
    }
  })
}
const chooseProvince = (value) => {
  form.value.cityId = null
  form.value.countyId = null
  form.value.city = null
  form.value.county = null
  cityData.value = []
  areaData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
  form.value.province = provinceData.value.find(item => item.id === value)?.name
}
const chooseCity = (value) => {
  form.value.countyId = null
  form.value.county = null
  areaData.value = []
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
  form.value.city = cityData.value.find(item => item.id === value)?.name
}
const chooseCounty = value => {
  form.value.county = areaData.value.find(item => item.id === value)?.name
}
const initOpen = () => {
  getProvinceData()
}
const uploadImageSuccess = (fileList) => {
  console.log(fileList)
}
const deleteImage = (fileList) => {
  console.log(fileList)
}
const uploadSuccess = (fileList) => {
  console.log(fileList)
}
const deleteFile = (fileList) => {
  console.log(fileList)
}
const confirm = () => {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      console.log(form.value)
    }
  })
}
const close = () => {
  emits('update:open', false)
  proxy.resetForm('formRef')
}
</script>
<style scoped></style>